<style lang="less" scoped>
  .pagebean {
    .name {
      text-align: center;
    }
  }
</style>

<template>
  <div class="">
    <div class="name mt5">
      <span>{{pageFrom.bus_num}}</span>
    </div>
    <div class="pagebean mt5">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        :current-page="dataPage"
        :total="total"
        layout="total, prev, pager, next">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'pagination',
  data () {
    return {
      pageFrom: {}
    }
  },
  computed: {
    pageSize () {
      // 每页显示条目个数
      return 10
    },
    total () {
      // 总条目数
      return 100
    },
    dataPage () {
      // go to url
      return 1
    }
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      let that = this
      console.log(`当前页: ${val}`)
      axios.get('/page')
        .then(function (res) {
          that.pageFrom = res.data['item' + val]
          console.log(that.pageFrom)
        })
        .catch(function (error) {
          console.log('errorPage ' + error)
        })
    },
    getDate () {
      console.log(this.pageFrom)
      // axios.get('/page')
      //   .then(function (res) {
      //     console.log(res)
      //     that.pageFrom = res.data
      //     console.log(that.pageFrom)
      //   })
      //   .catch(function (error) {
      //     console.log('errorPage ' + error)
      //   })
    }
  },
  beforeCreate () {
  },
  created () {
    let that = this
    axios.get('/page')
      .then(function (res) {
        console.log(res)
        that.pageFrom = res.data.item1
        console.log(that.pageFrom)
      })
      .catch(function (error) {
        console.log('errorPage ' + error)
      })
  },
  beforemount () {
  },
  mounted () {
    this.getDate()
  }
}
</script>
